<template>
    <div style="display: flex; align-items: center">
        <el-popover placement="right" :width="520">
            <template #reference>
                <el-button>选择图标</el-button>
            </template>
            <div class="box" style="padding-bottom: 138px">
                <div class="top-search">
                    <el-input clearable @clear="onReset" v-model="keyword" placeholder="输入图标名称（如：House）"
                        class="input-with-select">
                        <template #append>
                            <el-button @click="onSearch">搜索</el-button>
                        </template>
                    </el-input>
                    <div class="type-list-bar">
                        <div v-for="item in elementPlusIcons" :key="item.type">
                            <el-tag :closable="activeTag === item.type" @close="onReset"
                                :type="activeTag === item.type ? 'primary' : 'info'" @click="onClickTag(item.type)">
                                {{ item.type }}
                            </el-tag>
                        </div>
                    </div>
                </div>

                <div v-for="item in iconList" :key="item.type" class="icon-box">
                    <span class="title"> {{ item.type }} ({{ item.list.length }}个)</span>
                    <div class="list">
                        <div v-for="icon in item.list" :key="icon" class="vfor-box" @click="onClickIcon(icon)">
                            <div style="text-align: center;">
                                <el-icon :size="20" style="width: 100%; height:100%">
                                    <component :is="icon"></component>
                                </el-icon>
                                <div> {{ icon }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<script lang="ts" setup>
import { ref, toRaw } from 'vue'
import { elementPlusIcons } from '../utils/elementPlusIcons'

const iconList = ref([...elementPlusIcons])

const emit = defineEmits(['clickIcon'])
const onClickIcon = (icon: string) => {
    emit('clickIcon', icon)
}

const activeTag = ref('')
const onClickTag = (typeName: string) => {
    iconList.value = []
    activeTag.value = typeName
    iconList.value = [elementPlusIcons.find(item => item.type === typeName) as any]
}

const onReset = () => {
    iconList.value = [...elementPlusIcons]
    keyword.value = ''
    activeTag.value = ''
}

const keyword = ref('')
const onSearch = () => {
    activeTag.value = ''
    const lowerCaseKeyword = toRaw(keyword.value).toLowerCase()
    const newIconList = [
        {
            type: '搜索结果',
            list: elementPlusIcons.map(item => item.list).flat()
                .filter(item => item.toLowerCase().includes(lowerCaseKeyword))
        }
    ]
    iconList.value = newIconList
}
</script>

<style lang="scss">
.box {
    max-width: 520px;
    height: 360px;
    overflow-y: scroll;
    padding-bottom: 129px;

    .top-search {
        position: sticky;
        top: 0;
        height: 128px;
        background-color: white;
        z-index: 8;
        padding: 5px 0;
    }

    .type-list-bar {
        margin: 6px 0;
        width: 520px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        div {
            width: 100px;
            margin: 3.5px 5px;
            cursor: pointer;
        }
    }
}

.icon-box {
    max-width: 520px;

    .title {
        font-weight: 666;
        font-size: 22px;
    }

    .list {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 5rpx;

        .vfor-box {
            width: 133px;
            height: 66px;
            margin: 6px;
            border: 1px solid #d3e1e8;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            overflow-x: hidden;
            padding: 5px;
        }

        .vfor-box:hover {
            background: #eee;
            color: #e63f31;
        }
    }
}
</style>
